<template>
  <div class="bac">
    <br />
    <Card class="card">
      <h1 class="hello-text">欢迎登陆</h1>
      <div style="background-color: #dddddd; height: 2px"></div>
      <Form class="Form" ref="formValidate" :model="formValidate"
            :rules="ruleValidate" :label-width="70">
        <FormItem label="用户名" prop="username">
          <Input v-model="formValidate.username" placeholder="请输入用户名"></Input>
        </FormItem>
        <FormItem label="密码" prop="password">
          <Input type="password" v-model="formValidate.password"
                 placeholder="请输入密码"></Input>
        </FormItem>
        <FormItem prop="selected">
          <RadioGroup v-model="formValidate.selected">
            <Radio label="a">仅前端</Radio>
            <Radio label="b">发送给后端</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem v-show="formValidate.selected === 'b'" label="IP地址" prop="ip">
          <Input v-model="formValidate.ip"></Input>
        </FormItem>
        <FormItem>
          <Button type="primary"
                  @click="handleSubmit('formValidate')">登陆</Button>
          <Button @click="handleReset('formValidate')"
                  style="margin-left: 8px">注册</Button>
        </FormItem>
      </Form>
    </Card>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      formValidate: {
        username: "",
        password: "",
        selected: "a",
        ip: "http://127.0.0.1/",
      },
      ruleValidate: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
        ip: [
          { required: true, message: "后端IP地址不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success(
            `用户名：${this.formValidate.username}，密码：${this.formValidate.password}`
          );
        } else {
          this.$Message.error("格式错误，请检查！");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.bac {
  background: #eeeeee;
  height: 100vh;
  @media screen and (max-width: 375px) {
    .card {
      margin: 20px auto 0;
      width: 90%;
      border-radius: 30px;
    }
  }
  @media screen and (min-width: 376px) {
    .card {
      margin: 150px auto 0;
      width: 350px;
      border-radius: 30px;
    }
  }
  .hello-text {
    text-align: center;
    font-size: 32px;
    margin: 10px 0;
  }
}

.Form {
  padding: 5%;
}
</style>
